body,html{height:100%}
.wrapper{max-height:100%;margin:0 auto;overflow:hidden}
.watch3D,.watch3D-container,.wrapper{position:relative;height:100%}
.watch3D-container{perspective:1000px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.watch3D-bg{position:absolute;width:10000px;height:10000px;left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) translateZ(-1500px);transform:translateX(-50%) translateY(-50%) translateZ(-1500px)}.watch3D-wrapper{transform-style:preserve-3d}
.watch3D-lists,.watch3D-wrapper{position:absolute;width:100%;height:100%;-webkit-transform-style:preserve-3d}
.watch3D-lists{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.watch3D-list,.watch3D-lists{left:50%;top:50%;transform-style:preserve-3d}
.watch3D-list{position:absolute;-webkit-transform-style:preserve-3d;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.watch3D-tip{position:absolute;left:50%;top:50%;width:auto;height:auto;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform:translate3d(-50%,-50%,-1px) rotateY(180deg);transform:translate3d(-50%,-50%,-1px) rotateY(180deg);display:block}
.watch3D-tip-wrapper{position:absolute;left:0;top:0;width:100px;height:100px;background:#6cf}
.watch3D-tpl-content{position:relative}




@media (min-width:641px){
.topVR {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}
.vr-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    display: none;
}
.beibei{ background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

}

@media (min-width:641px){
#vrBg{
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    z-index: -1000;
    left: 0;
    right: 0;
    top: 0;
}
}


@media(max-width: 640px){
.topVR {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;

}
.vr-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    z-index: -1;
    กข: ;
    display: none;
    top: 0;
    left: 0;
    right: 0;
}
.bg-blue{background-color: #e7e7e7!important;}
}

@media(max-width: 640px){
	#vrBg {
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    z-index: -2;
    left: 0;
    right: 0;
    top: 0;    margin-top: 40px;
}
}



.bg-bei{background-color: #5b5668!important;}

.bg-tm{ opacity:0.8;} 
.hamburger { background:#e7e7e7;}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{background-color: #7d6464;}
	
.nav-Icon{position:absolute; position:absolute;
    right:10px;
    top:0px;
}

@media (max-width: 992px){
.when-collapsed {
    position: absolute;

    background-color: rgba(0,0,0,0.8);
    width:28%;
    top: 102%;
    left:70%;
    right: 0;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 1150;
}
}
@media (max-width: 992px){
.when-collapsed a{
    color:#b6b6b6;
}
}


.card-img-text{
    position: absolute;
    right: 0;   
    font-size: 14px;
    bottom: 0;
    left: 0;
    padding: 0.05rem; 
}
.card-img-text p{margin-bottom:0; padding:5px 10px;  line-height:20px;}



.btn-info {
    background: #058de5f5!important;
  border-color: #058de5f5!important;}
  
  .text-info {
  color: #fff!important;}
  
  .tab-line .nav-link.active {
    border-bottom-color: #000;
}
a.active, a:active, a:focus, a:hover {
    outline: none;
    text-decoration: none;
   font-weight:bold;
  color: #000;}